/*
* @Author: Yejing
* @Date: 2023-06-10 10:31:18
* @LastEditors: WangXi
* @LastEditTime: 2023-06-25 17:30:02
* @Description: desc
*/
<template>
	<view class="my-tracks-container">
		<c-layout>
			<c-navigation-bar slot="head" navbarBgColor="transparent" title="我的足迹"></c-navigation-bar>
			<view class="container-box">
				<view class="check-box">
					<view :class="`check-item ${current === index?'is-checked':''}`" v-for="(item,index) in list"
						@click="()=>{current = index}" :key="index">
						{{item}}
					</view>
				</view>
				<view class="date"
					style="display: flex;justify-content: space-between;font-size: 30rpx;align-items: center;">
					<text>{{currentDate}}</text>
					<u-icon name="arrow-right" @click="calendarShow = true"></u-icon>
				</view>
				<!-- 日期-时间选择 -->
				<view class="date-time-select">
					<swiper :indicator-dots="false" :interval="3000" :duration="1000" :current="current"
						@change="(data)=>current = data.target.current">
						<swiper-item>
							<scroll-view class="swiper-item" :scroll-y="true">
								<cartItem :checkShow="false" :data="item" v-for="(item,id) in productList" :key="id">
								</cartItem>
							</scroll-view>
						</swiper-item>
						<image src="@/static/images/close.png" mode=""></image>
						<swiper-item>
							<scroll-view class="swiper-item" :scroll-y="true">
								<livesCard :data="item" v-for="(item,id) in livesList" :key="id"></livesCard>
							</scroll-view>
						</swiper-item>
						<swiper-item>
							<scroll-view class="swiper-item" :scroll-y="true">
								<view class="video-box">
									<videoCard @videoInfo="videoInfo(index)"
										:details="{...item,img:$u.appImage.getOssVideoCover(item.url)}"
										v-for="(item,index) in videoList" :key="index"></videoCard>
								</view>
							</scroll-view>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</c-layout>

		<u-calendar v-model="calendarShow" @change="calendarChange">
			<view slot="tooltip">
			</view>
		</u-calendar>
	</view>
</template>

<script>
	import livesCard from './components/livesCard.vue'
	export default {
		components: {
			livesCard
		},
		data() {
			return {
				list: ['商品', '直播', '视频'],
				// 
				currentDate: '2022-01-10',
				// 当前切换
				current: 0,
				calendarShow: false,
				// 商品列表
				productList: [{
						imgSrc: require("@/static/images/close.png"),
						price: '954',
						des: 'Vado Odelle Dress',
						name: 'Roller Rabbit'
					},
					{
						imgSrc: require("@/static/images/close.png"),
						price: '954',
						des: 'Vado Odelle Dress',
						name: 'Roller Rabbit'
					},
					{
						imgSrc: require("@/static/images/close.png"),
						price: '954',
						des: 'Vado Odelle Dress',
						name: 'Roller Rabbit'
					},
					{
						imgSrc: require("@/static/images/close.png"),
						price: '954',
						des: 'Vado Odelle Dress',
						name: 'Roller Rabbit'
					},
					{
						imgSrc: require("@/static/images/close.png"),
						price: '954',
						des: 'Vado Odelle Dress',
						name: 'Roller Rabbit'
					},
					{
						imgSrc: require("@/static/images/close.png"),
						price: '954',
						des: 'Vado Odelle Dress',
						name: 'Roller Rabbit'
					},
					{
						imgSrc: require("@/static/images/close.png"),
						price: '954',
						des: 'Vado Odelle Dress',
						name: 'Roller Rabbit'
					}
				],
				// 直播列表
				livesList: [{
						cover: require("@/static/images/close.png"), //封面
						name: 'The Marc Jacobs', //主播名称
						des: 'Traveler Tote', //描述
					},
					{
						cover: require("@/static/images/close.png"),
						name: '主播2',
						des: 'Traveler Tote2',
					},
					{
						cover: require("@/static/images/close.png"),
						name: 'The Marc Jacobs',
						des: 'Traveler Tote3',
					},
					{
						cover: require("@/static/images/close.png"),
						name: 'The Marc Jacobs',
						des: '',
					},
					{
						cover: require("@/static/images/close.png"),
						name: 'The Marc Jacobs',
						des: '',
					}
				],
				// 视频列表
				videoList: [{
						img: require("@/static/images/close.png"),
					},
					{
						img: require("@/static/images/close.png"),
					}, {
						img: require("@/static/images/close.png"),
					}, {
						img: require("@/static/images/close.png"),
					}, {
						img: require("@/static/images/close.png"),
					}, {
						img: require("@/static/images/close.png"),
					}, {
						img: require("@/static/images/close.png"),
					}, {
						img: require("@/static/images/close.png"),
					}, {
						img: require("@/static/images/close.png"),
					}, {
						img: require("@/static/images/close.png"),
					}, {
						img: require("@/static/images/close.png"),
					}, {
						img: require("@/static/images/close.png"),
					}, {
						img: require("@/static/images/close.png"),
					}, {
						img: require("@/static/images/close.png"),
					}, {
						img: require("@/static/images/close.png"),
					}, {
						img: require("@/static/images/close.png"),
					}, {
						img: require("@/static/images/close.png"),
					}, {
						img: require("@/static/images/close.png"),
					}, {
						img: require("@/static/images/close.png"),
					}, {
						img: require("@/static/images/close.png"),
					}
				]
			};
		},
		methods: {
			calendarChange(data) {
				this.currentDate = data.result
			},
			videoInfo(index) {
				this.$u.vuex('vuex_video_record', {
					list: this.videoList,
					index: index,
					show: true
				})
				uni.navigateTo({
					url: "/pages/public/recordVideo/recordVideo",
					"animationType": "slide-in-right",
					"animationDuration": 300
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.my-tracks-container {
		background-color: #F7F8FA;

		.container-box {
			height: 100%;
			display: flex;
			flex-direction: column;
			padding-left: 0;
			padding-right: 0;

			.check-box {
				display: flex;
				padding: 0 40rpx;

				.check-item {
					flex: 1;
					height: 60rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: #F1F2F6;
					color: #ACB1C0;
					transition: .2s;

					&.is-checked {
						background-color: #fff;
						color: #1E2432;
					}
				}
			}

			.date {
				padding: 0 40rpx;
				padding-top: 20rpx;
			}

			.date-time-select {
				padding-top: 40rpx;
				flex: auto;
				background-color: #fff;
				margin-top: 20rpx;
				border-top: 2rpx solid #E5E5E5;

				uni-swiper {
					height: 100%;

					uni-swiper-item {
						box-sizing: border-box;
						padding: 0 30rpx;

						.swiper-item {
							height: 100%;

							.cart-item-container {
								margin-bottom: 36rpx;
							}

							.lives-card-container {
								margin-bottom: 40rpx;
							}

							.video-box {
								display: flex;
								flex-wrap: wrap;

								>view {
									margin-bottom: 18rpx;

									&:not(:first-child):not(:nth-child(3n+1)) {
										margin-left: 20rpx;
									}
								}
							}
						}
					}
				}
			}
		}
	}
</style>